<template>
	<view>
		<view class="header u-padding-left-32 u-padding-right-32">
			<u-subsection :list="tabLists" :current="tabCurrent" @change="tabChange" mode="subsection" bgColor="#FFF"
				activeColor="#FFF" inactiveColor="#66a6ff"></u-subsection>
			<view class="white padding-top-5vh">
				<text class="nr">共需还款</text>
				<text class="xs">(元)</text>
			</view>
			<view class="xxxl bold white u-padding-top-25 u-padding-bottom-25 u-border-bottom-white">
				{{parseFloat(this.moneyDatas.principal) + parseFloat(this.moneyDatas.totalInterest) | toTwoDecimal | formatWithCommas}}
			</view>
			<view class="row u-padding-top-25 white">
				<view class="u-flex-1">
					<view>
						<text class="nr">贷款金额</text>
						<text class="xs">(元)</text>
					</view>
					<view class="u-padding-top-15 xxl">{{this.moneyDatas.principal | toTwoDecimal}}</view>
				</view>
				<view class="u-flex-1">
					<view>
						<text class="nr">贷款利息</text>
						<text class="xs">(元)</text>
					</view>
					<view class="u-padding-top-15 xxl">{{this.moneyDatas.totalInterest | toTwoDecimal}}</view>
				</view>
				<view class="u-flex-1 ">
					<view>
						<text class="nr">贷款期数</text>
						<text class="xs">(月)</text>
					</view>
					<view class="u-padding-top-15 xxl">{{this.period | toTwoDecimal}}</view>
				</view>
			</view>
		</view>
		<view class="periods-title-area row">
			<view class="periods-title xs u-flex-1 u-text-center">期数</view>
			<view class="periods-title xs u-flex-1 u-text-center">月供(元)</view>
			<view class="periods-title xs u-flex-1 u-text-center">本金(元)</view>
			<view class="periods-title xs u-flex-1 u-text-center">利息(元)</view>
		</view>
		<view class="periods-list-area row" v-for="(v,k) in this.moneyDatas.payments" :key="k">
			<view class="periods-item xs u-flex-1 u-text-center">第{{(k + 1) }}期</view>
			<view class="periods-item xs u-flex-1 u-text-center">
				{{v.monthlyPayment | toTwoDecimal}}
			</view>
			<view class="periods-item xs u-flex-1 u-text-center">{{v.monthlyPrincipal | toTwoDecimal}}</view>
			<view class="periods-item xs u-flex-1 u-text-center">{{v.monthlyInterest | toTwoDecimal}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: "",
				period: "",
				rate: "",
				tabCurrent: 0,
				tabLists: [{
						name: '等额本息'
					},
					{
						name: '等额本金'
					},
					{
						name: '等本等息'
					},
					{
						name: '先息后本'
					}
				],
				moneyDatas:{}
			};
		},
		onLoad(e) {
			if (e && e.money) this.money = e.money;
			if (e && e.period) this.period = e.period;
			if (e && e.rate) this.rate = e.rate;
			if (e && e.moderepayment) this.tabCurrent = e.moderepayment;
			this.moneyDatas = this.calculateList(this.tabCurrent, this.money, this.period, this.rate)
		},
		filters:{
			toTwoDecimal(number) {
			    return number !== undefined && number !== null ? parseFloat(number).toFixed(2) : number;
			},
			
			formatWithCommas(number) {
			    if (number === undefined || number === null) return number;
			    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			}

		},
		methods: {
			tabChange(e) {
				this.tabCurrent = e;
				this.moneyDatas = this.calculateList(this.tabCurrent, this.money, this.period, this.rate)
			},
			calculateList(type, principal, months, rate) {
			    switch (parseInt(type)) {
			        case 0: return this.equalPrincipalInterest(principal, months, rate);
			        case 1: return this.equalPrincipal(principal, months, rate);
			        case 2: return this.fixedInterestEqualPrincipal(principal, months, rate);
			        case 3: return this.interestFirstPrincipalLast(principal, months, rate);
			        default: return false;
			    }
			},
			equalPrincipalInterest(principal, months, rate) {
			    const monthlyRate = rate / 100;
			    const monthlyPayment = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
			    const totalInterest = months * monthlyPayment - principal;
			    console.log("totalInterest", totalInterest);
			    const totalAmount = totalInterest + principal;
			    const payments = Array.from({ length: months }, (_, month) => {
			        const monthlyInterest = principal * monthlyRate * (Math.pow(1 + monthlyRate, months) - Math.pow(1 + monthlyRate, month)) / (Math.pow(1 + monthlyRate, months) - 1);
			        const monthlyPrincipal = principal * monthlyRate * Math.pow(1 + monthlyRate, month) / (Math.pow(1 + monthlyRate, months) - 1);
			        return { monthlyInterest, monthlyPrincipal, monthlyPayment };
			    });
			    return { principal, totalInterest, totalAmount, payments };
			},
			equalPrincipal(principal, months, rate) {
			    const monthlyRate = rate / 100;
			    const monthlyPrincipal = principal / months;
			    const totalInterest = (monthlyPrincipal + principal * monthlyRate + principal / months * (1 + monthlyRate)) / 2 * months - principal;
			    const totalAmount = totalInterest + principal;
			    const payments = Array.from({ length: months }, (_, month) => {
			        const paidPrincipal = monthlyPrincipal * month;
			        const monthlyInterest = (principal - paidPrincipal) * monthlyRate;
			        return { monthlyInterest, monthlyPrincipal, monthlyPayment: monthlyInterest + monthlyPrincipal };
			    });
			    return { principal, totalInterest, totalAmount, payments };
			},
			fixedInterestEqualPrincipal(principal, months, rate) {
			    const monthlyInterest = principal * rate / 100;
			    const monthlyPrincipal = principal / months;
			    const totalInterest = monthlyInterest * months;
			    const totalAmount = totalInterest + principal;
			    const payments = Array.from({ length: months }, () => ({ monthlyInterest, monthlyPrincipal, monthlyPayment: monthlyInterest + monthlyPrincipal }));
			    return { principal, totalInterest, totalAmount, payments };
			},
			interestFirstPrincipalLast(principal, months, rate) {
			    const monthlyInterest = principal * rate / 100;
			    const totalInterest = monthlyInterest * months;
			    const totalAmount = totalInterest + principal;
			    const payments = Array.from({ length: months }, (_, month) => month === months - 1 ? { monthlyInterest, monthlyPrincipal: principal, monthlyPayment: monthlyInterest + principal } : { monthlyInterest, monthlyPrincipal: 0, monthlyPayment: monthlyInterest });
			    return { principal, totalInterest, totalAmount, payments };
			}

		}
	}
</script>

<style lang="scss">
	.header {
		top: 0;
		padding: 2vh 2vw;
		position: sticky;
		background-color: #66a6ff;
		
		.padding-top-5vh{
			padding-top: 5vh;
		}
		
		.xxxl{
			font-size: 50rpx;
		}
		.u-border-bottom-white{
			border-bottom: 2rpx solid white;
		}
	}
	
	.periods-title-area{
		background-color: rgba(102, 144, 255, .1);
		.periods-title{
			line-height: 64rpx;
		}
	}
	
	.periods-list-area{
		background-color: #FFF;
		
		.periods-item{
			line-height: 64rpx;
		}
		
		&:nth-child(odd){
			background-color: rgb(248, 248, 248);
		}
	}
</style>